<!doctype html>
<html>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width initial-scale=1'>
    <title>css3笔记</title>
</head>
<body class='typora-export os-windows'>
<div><h1><a></a><span>CSS3选择器</span></h1>
    <h3><a name="兄弟选择器" class="md-header-anchor"></a><span>兄弟选择器：</span></h3>
    <ol start=''>
        <li><span>相邻兄弟选择器</span>
            <span>匹配的是相邻兄弟元素</span>
            <span>匹配当前元素的【后面的一个】元素，</span>
            <span>前提是两个元素必须有一个父元素</span>
            <span>语法：selector1+selector2</span></li>
        <li><span>通用兄弟选择器</span>
            <span>匹配当前元素【后面的所有】兄弟元素</span>
            <span>语法：selector1~selector2</span>
            <span>属性选择器</span></li>
        <li><span>[属性名] </span><br/><span>匹配带有指定属性的元素</span></li>
        <li><span>元素名[属性名]</span>
            <span>例如：p[id] 匹配所有包含id属性的p元素</span></li>
        <li><span>元素名</span>[<span>属性1</span>][属性2]<span>...</span>
            <span>匹配既包含属性1又包含属性2的指定元素</span>
            <span>例如：div</span>[<span>id</span>][class]<span> - </span>
            <span>	</span><span>    匹配包含id属性和class属性的div元素</span></li>
        <li><span>元素名[属性=值]</span>
            <span>例如：input[type=text] - 匹配</span>
            <span>所有type属性值为text的input元素  - 匹配输入框</span></li>
        <li><span>元素[属性~=值]</span>
            <span>匹配指定的属性值中，包含【独立值】单词的元素</span></li>
        <li><span>元素[属性*=值]</span>
            <span>匹配指定的属性中，属性值中包含【值】的元素</span></li>
        <li><span>元素[属性^=值]</span><br/><span>属性值以【值】开头的元素</span><span>	</span></li>
        <li><span>元素[属性$=值]</span><br/><span>属性值以【值】结尾的元素</span>
            <span>目标伪类选择器：用于匹配当前活动的</span><em><span>锚点</span></em><span>元素</span>
            <span>语法： :target</span></li>
    </ol>
    <h3><span>元素状态伪类选择器：表单元素居多</span></h3>
    <pre>
        <span>:enabled 匹配每个已启用的元素</span>
        <span>:disabled 匹配每个被禁用的元素</span>
        <span>:checked 匹配每个已被选中的input元素</span>
        <span>（单选框，复选框）</span>
    </pre>
    <pre>
    <span>p:first-child{</span>
    <span>//选中作为【第一个子元素】存在的指定p元素</span>
</pre>
    <span>color:red;</span>
    <span>}</span>
    <span>p:last-child{</span>
    <span>//选中作为【最后一个子元素】存在的指定元素</span>
    <span>color:blue;</span>
    <span>}</span>
    <span>:only-child 匹配其父元素中唯一的子元素</span>
    </pre>
    <pre>
    <span>&lt; p &gt;</span>
    <span>    &lt; a &gt;百度&lt; /a &gt;</span>
    <span>&lt; /p &gt; </span>
    <span>a:only-child 可以匹配</span>
    <span>&lt; p &gt;</span>
    <span>    &lt; a &gt;百度&lt; /a &gt;</span>
    <span>    &lt; a &gt;职坐标&lt; /a &gt;</span>
    <span>&lt; /p &gt; </span>
    <span>a:only-child 不能匹配</span>
    </pre>
    <pre>
    <span>语法： :not(selector)</span>
    <span>&nbsp; input:not([type=text]) 选中所有type不为text的input元素</span>
</pre>
    <h2><span>伪元素选择器</span></h2>
    <p><span>特点:获取指定元素中某一部分文本而用的。</span></p>
    <ol>
        <li><span>:first-letter 用于选取指定选择器（元素）的首字母</span></li>
        <li><span>:first-line 用于选取指定选择器（元素）的首行文本</span></li>
        <li><span>::selection 匹配被用户选取的部分</span></li>
    </ol>
    <p>
        <span>内容生成：</span>
        <span>通过CSS向已有的元素中增加文本（图片内容）</span>
        <span>选择器：</span>
    </p>
    <ol>
        <li><span>:before  向匹配的元素之前增加生成的内容，定位到元素的开始位置</span></li>
        <li><span>:after   向匹配的元素之后增加生成的内容，定位到元素的结束位置</span><br>
            <span>属性：content</span></li>
    </ol>
    <pre>
    <span>div:before{</span>
    <span>  content:"生成内容" /url(图片路径) / 计数器</span>
    <span>}</span>
</pre>
    <p><span>如何解决：子元素margin-top/margin-bottom越界问题</span></p>
    <p><span>解决方案：</span></p>
    <ol>
        <li><span>给父元素加border——有副作用</span></li>
        <li><span>给父元素加overflow:hidden——有副作用</span></li>
        <li><span>给父元素加前置内容生成&quot; &quot;,</span>
            <span>显示样式为table——无任何副作用</span><br>
            <span>示例如下：</span></li>
    </ol>
    <pre>
    <span>越界元素:before{</span>
    <span>    content:" ";</span>
    <span>    display: table;</span>
    <span>}</span>
</pre>
    <p><span>如何解决：</span></p>
    <ol>
        <li><span>所有的子元素浮动对父元素(父元素塌陷现象)</span></li>
        <li><span>后续元素造成的影响</span>
            <span>（布局乱套-浮动元素会覆盖未做浮动的元素 字围现象）</span>
    </ol>
    <ol>
        <li><span>解决方案：</span></li>
        <li><span>给父元素加height——有局限性</span></li>
        <li><span>给父元素加overflow:hidden——有副作用</span></li>
        <li><span>给父元素加子元素 clear:both——语义有问题</span></li>
        <li><span>给父元素添加后置的内容生成&quot; &quot;,显示样式为table，</span>
            <span>清除浮动clear:both——无任何副作用</span>
    </ol>
    <p>示例如下：</p>
    <pre><span>元素:after{</span>
    <span>    content:" ";</span>
    <span>    display: table;</span>
    <span>    clear:both;</span>
    <span>}</span></pre>
    <p><span>计数器：</span>
        <span>通过css定义，在其他元素中可以使用该计数器</span>
        <span>生成的数字属性：</span></p>
    <ol>
        <li>
            <span>counter-reset</span>
            <span>用于初始化一个计数器并设置初始值</span>
        </li>
    </ol>
    <ul>
        <li>
            <span>注意：如果不设置初始值，默认从0开始，</span>
            <span>设置的值可以是正. 负数</span>
        </li>
    </ul>
    <pre>
    <span>语法：</span>
    <span>{counter-reset:counter1 10}</span>
    <span>{counter-reset:counter1 10 counter2 100}</span>
</pre>
    <p><span>关于计数器的用法：</span>
        <span>如果整个页面任何一个元素都能使用该计数器，</span>
        <span>那么必须把计数器定义到body元素中，</span>
        <span>切忌将计数器定义到某一个元素中。</span>
        <span>因为如果把计数器定义到某一个元素中那么计数器永远</span>
        <span>都是初始值</span></p>
    <pre>
    <span>body{</span>
    <span>    counter-reset:c1 10 c2 20;</span>
    <span>}</span>
</pre>
    <ol>
        <li><span>counter-increment:设置计数器的名称和步长</span>
            <span>（增量）</span></li>
    </ol>
    <pre>
    <span>div{</span>
    <span>    counter-increment:c1 10;</span>
    <span>}</span>
</pre>
    <ol>
        <li>
            <span>调用计数器（函数），counter(counterName)</span><br>
            <span>counterName - 计数器的名称</span>
        </li>
    </ol>
    <blockquote><p><span>作用：使用计数器创建出来的数字文本</span></p></blockquote>
</div>
</body>
</html>